<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Openchat AI-Copilot</title>
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1,maximum-scale=1"
    />
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Noto+Sans+Arabic:wght@300;400;500;600;700&display=swap"
      rel="stylesheet"
    />
    <style>
      /* reset */
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      body {
        background-color: #f5f5f5;
        font-family: "Noto Sans Arabic", sans-serif;
      }

      #opencopilot-root {
        margin-top: 50px;
        background-color: red;
        padding: 20px;
        border-radius: 10px;
        width: 500px;
        height: 500px;
        margin-inline: auto;
        position: relative;
      }

      #opencopilot-root::after {
        content: "Container";
        position: absolute;
        top: 0;
        translate: -50% -50%;
        left: 0;
        background-color: #fff;
        padding: 5px;
        border-radius: 5px;
        color: black;
      }
    </style>
  </head>

  <body>
    <main>
      <h2>
        Playground: here you can see how the widget behaves in different
        contexts
      </h2>
    </main>

    <script type="module" src="/src/main.tsx"></script>
    <div id="opencopilot-root"></div>

    <script>
      const token = "9Mq2t3kepm1F5Akr";
      const apiUrl = "https://api.opencopilot.so/backend";
      const socketUrl = "https://api.opencopilot.so";
      const sharedConfig = {
        initialMessage: "Welcome back! How can I help you today?", // optional
        token: token, // required
        apiUrl: apiUrl, // required
        socketUrl: socketUrl, // required
        defaultOpen: true, // optional
        language: "en", // optional
        warnBeforeClose: true,
        debug: true,
        headers: {
          // optional
          // Authorization: "Bearer BQAlIe479yo16aXf",
          Cookie: `SESSIONID_MYM=6op56rogo023pqsas94tq6nbbl;`,
        },
        queryParams: {
          // optional
          // passing extra query params to the backend along with every user message.
        organizationId: 'org_7658431',
        },
        bot: {
          name: "AI Bot",
        },
        user: {
          // optional
          name: "John Doe",
          avatarUrl: "https://i.pravatar.cc/150?u=fake@pravatar.com",
        },
      };

      // this one loads in the center of the screen
      document.addEventListener("DOMContentLoaded", () => {
        initAiCoPilot({
          ...sharedConfig,
          triggerSelector: "#triggerSelector", // optional
          rootId: "opencopilot-root", // optional otherwise it will create a div with id opencopilot-root
        });
      });

      // this one is rendered in the bottom right corner
      document.addEventListener("DOMContentLoaded", () => {
        initAiCoPilot({
          ...sharedConfig,
          rootId: "opencopilot-root-2", // optional otherwise it will create a div with id opencopilot-root
          containerProps: {
            // optional
            style: {
              // optional
              position: "fixed",
              bottom: "10px",
              right: "10px",
              width: "400px",
              height: "500px",
              overflow: "hidden",
            },
          }, // optional
        });
      });
    </script>
  </body>
</html>
